<template>
  <Dialog v-model="visible" title="资源选择" :width="1000">

    
    <ProTable
        ref="ProTableRef"
        row-key="id"
        :filters="filters"
        :columns="columns"
        :get-table-data="getTableData"
        custom-id="basic-menu"
      > 
      </ProTable>
    <template #footer>
      <el-button @click="visible = false" type="danger">取消</el-button>
      <el-button @click="submit" type="primary">确认</el-button>
    </template>
  </Dialog>
</template>



<script setup lang="ts">

  import {ref, unref, nextTick, watch, reactive, computed} from 'vue'
  import { ElForm,  ElFormItem, ElInput, ElRadioGroup , ElRadio, ElButton, FormRules} from 'element-plus'
  import { Dialog, ProTable, FilterItem, TableColumnItem, Icon, Collapse, CollapseItem } from "@/components";
  import { selectPermsPageApi, deleteMenuApi } from '@/api/system/permission'
  const emit = defineEmits<{
    (e: 'submit', rows: any[])
  }>()

  
  const ProTableRef = ref<InstanceType<typeof ProTable>>()
  const visible = ref(false)


    // 资源类型
    const permsTypeEnum = [
    { label: '资源', value: 1 },
    { label: '按钮', value: 2 },
  ]

  const filters: FilterItem[] = [
    {
      label: '资源名称',
      prop: 'permsName'
    },
    {
      label: '权限码',
      prop: 'permsCode'
    },
    {
      label: '资源类型',
      prop: 'permsType',
      type: 'select',
      list: permsTypeEnum
    },
    {
      label: '接口地址',
      prop: 'path'
    }
  ]

  const columns: TableColumnItem[] = [
    {
      type: 'selection',
      prop: 'permsName',
      fixed: 'left',
    },
    {
      label: '资源名称',
      prop: 'permsName',
      fixed: 'left',
    },
    {
      label: '资源类型',
      prop: 'permsType',
      list: permsTypeEnum,
      tagType: {
        1: 'warning',
        2: 'primary'
      }
    },
    {
      label: '权限码',
      prop: 'permsCode',
    },
    {
      label: '接口地址',
      prop: 'path'
    },
  ] 

  const getTableData = async (params) => {
    return (await selectPermsPageApi(params)).data
  }

  
  const submit = async () => {
    const rows = ProTableRef.value.getSelectionRows()
    emit('submit', rows)
    visible.value = false
  }

  const openDialog = (id?: number, readonlyFalg = false) => {
    visible.value = true
  }


  defineExpose({
    openDialog
  })
</script>
